<template>
  <el-form :model="form">
    <el-form-item label="唯一标识" label-width="70px">
      <el-input v-model="form.name" placeholder="请输入名称" @change="handleChange"></el-input>
    </el-form-item>
    <el-form-item label="描述" label-width="70px">
      <el-input v-model="form.description" placeholder="请输入描述" @change="handleChange"></el-input>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import type { UserApiType } from '@/apis/user/namespace';

const emit = defineEmits<{
  (e: 'update:modelValue', value: Omit<UserApiType.Roles, 'id'>): void;
}>();

const props = defineProps({
  modelValue: {
    type: Object as PropType<Omit<UserApiType.Roles, 'id'>>,
    required: true,
  },
});

const form = ref<Omit<UserApiType.Roles, 'id'>>({
  name: '',
  description: '',
});

const handleChange = () => {
  emit('update:modelValue', form.value);
};

watch(
  () => props.modelValue,
  (value) => {
    form.value = value;
  },
);
</script>

<style scoped lang="scss"></style>
